<template>
    <el-menu-item v-if="!route.hidden && getOnlyRoute()" :index="resolvePath(route.path)">
        <menu-link :to="resolvePath(getOnlyRoute().path)">
            <i :class="getOnlyRoute().meta.icon" />
            <span>{{ getOnlyRoute().meta.title }}</span>
        </menu-link>
    </el-menu-item>
    <el-submenu v-else-if="!route.hidden" ref="subMenu" :index="route.path" popper-append-to-body>
        <template slot="title"
            ><i v-if="route.meta && route.meta.icon" :class="route.meta.icon"></i><span v-if="route.meta">{{ route.meta.title }}</span></template
        >
        <menu-item v-for="child in route.children" :key="resolvePath(child.path)" :route="child" :base-path="resolvePath(route.path)" />
    </el-submenu>
</template>


<script>
import path from 'path';
import MenuLink from '../menu-link/index.vue';
import { ValidateUtils } from '@/utils/validate';
export default {
    name: 'MenuItem',
    props: ['route', 'basePath'],
    components: {
        MenuLink
    },
    methods: {
        getOnlyRoute() {
            const routes = (this.route.children || []).filter((child) => !child.hidden);
            if (!routes.length) {
                return this.route;
            }
            if (this.route.onlyChild && routes.length === 1) {
                return this.route.children[0];
            }
        },
        resolvePath(routePath) {
            return ValidateUtils.isExternalLink(routePath) ? routePath : path.resolve(this.basePath, routePath);
        }
    }
};
</script>

<style lang="scss" scoped>
.el-menu-item.is-active {
    background-color: #ecf5ff;
}
</style>